import React from 'react';
import { Box, Typography, Paper, Grid, Button, Container, Divider, Stack, useTheme } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import CalculateIcon from '@mui/icons-material/Calculate';
import SavingsIcon from '@mui/icons-material/Savings';
import SecurityIcon from '@mui/icons-material/Security';
import StorageIcon from '@mui/icons-material/Storage';
import DevicesIcon from '@mui/icons-material/Devices';

const FeatureCard: React.FC<{ title: string; description: string; icon: React.ReactNode; to: string }> = ({ title, description, icon, to }) => (
  <Grid item xs={12} sm={6}>
    <Paper sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column', transition: 'all 0.3s', '&:hover': { transform: 'translateY(-5px)', boxShadow: 3 } }}>
      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
        {icon}
        <Typography variant="h6" component="h3" sx={{ ml: 1 }}>
          {title}
        </Typography>
      </Box>
      <Typography variant="body2" sx={{ mb: 2, flex: 1 }}>
        {description}
      </Typography>
      <Button component={RouterLink} to={to} variant="outlined" color="primary" fullWidth>
        立即使用
      </Button>
    </Paper>
  </Grid>
);

const SecurityFeature: React.FC<{ icon: React.ReactNode; title: string; description: string }> = ({
  icon,
  title,
  description,
}) => (
  <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 2 }}>
    <Box sx={{ mr: 2, color: 'primary.main' }}>{icon}</Box>
    <Box>
      <Typography variant="h6" gutterBottom sx={{ fontSize: '1.1rem' }}>
        {title}
      </Typography>
      <Typography variant="body2" color="text.secondary">
        {description}
      </Typography>
    </Box>
  </Box>
);

const HomePage: React.FC = () => {
  const theme = useTheme();
  
  return (
    <Container maxWidth="lg">
      <Box sx={{ 
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column'
      }}>
      <Box sx={{ 
        textAlign: 'center', 
        mb: 6,
        mt: 4,
        background: `linear-gradient(120deg, ${theme.palette.primary.main}15, ${theme.palette.primary.main}05)`,
        borderRadius: 2,
        p: 4
      }}>
        <Typography variant="h4" component="h1" gutterBottom sx={{ fontWeight: 'bold', color: 'primary.main' }}>
          智能短期理财助手
        </Typography>
        <Typography variant="subtitle1" sx={{ mb: 3 }}>
          智能管理您的短期理财，轻松实现财富增值
        </Typography>
      </Box>

      <Grid container spacing={4} sx={{ mb: 6 }}>
        <FeatureCard
          title="理财产品收藏"
          description="轻松收藏和管理各类短期理财产品，随时掌握最新收益信息。"
          icon={<SavingsIcon color="primary" fontSize="large" />}
          to="/products"
        />
        <FeatureCard
          title="收益率计算器"
          description="快速计算预期收益，多种计算模式满足不同投资需求。"
          icon={<CalculateIcon color="primary" fontSize="large" />}
          to="/calculator"
        />
      </Grid>

      <Box 
        sx={{ 
          mt: 'auto',
          pt: 6,
          pb: 4
        }}
      >
        <Divider sx={{ mb: 6 }} />
        
        <Typography variant="h5" gutterBottom sx={{ mb: 4, textAlign: 'center' }}>
          数据安全与隐私保护
        </Typography>
        
        <Grid container spacing={4} sx={{ mb: 4 }}>
          <Grid item xs={12} md={4}>
            <SecurityFeature
              icon={<SecurityIcon fontSize="large" />}
              title="本地数据存储"
              description="所有个人数据均存储在您的浏览器本地，不会上传至任何服务器，确保您的数据安全性。"
            />
          </Grid>
          <Grid item xs={12} md={4}>
            <SecurityFeature
              icon={<StorageIcon fontSize="large" />}
              title="数据持久化"
              description="使用浏览器的本地存储技术，即使关闭浏览器后重新打开，您的数据依然安全保存。"
            />
          </Grid>
          <Grid item xs={12} md={4}>
            <SecurityFeature
              icon={<DevicesIcon fontSize="large" />}
              title="设备独立"
              description="数据仅在当前设备保存，不会在设备间同步，进一步保障您的数据隐私。"
            />
          </Grid>
        </Grid>

        <Stack spacing={2} sx={{ textAlign: 'center' }}>
          <Typography variant="body2" color="text.secondary">
            注意：本应用仅作为理财参考工具，不构成任何投资建议。实际收益以产品说明为准，投资需谨慎。
          </Typography>
          <Typography variant="body2" color="text.secondary">
            建议定期备份重要数据，以防浏览器缓存清除导致数据丢失。
          </Typography>
        </Stack>
      </Box>
      </Box>
    </Container>
  );
};

export default HomePage;